<template>
	<view class="categoryContainer">
		<Search></Search>
		<view class="main">
			<scroll-view class="main_left" scroll-y="true" enable-flex>
				<view
					class="left_item "
					@click="currentId = category.id"
					:class="{ active: currentId === category.id }"
					v-for="(category, index) in categoryList"
					:key="category.id"
				>
					<text>{{ category.name }}</text>
				</view>
			</scroll-view>

			<scroll-view class="main_right" scroll-y="true" enable-flex>
				<!--轮播图 -->
				<view class="right_swiper scroll_item banner">
					<swiper :indicator-dots="currentCategoryInfo.bannerList &&currentCategoryInfo.bannerList.length > 1 && true" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .5)" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(banner, index) in currentCategoryInfo.bannerList || [1]" :key="index">
							<view class="swiper-item"><image :src="banner.banner || currentCategoryInfo.banner"></image></view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 每一小项 -->
				<view class="right_item scroll_item " v-for="(cate, index) in currentCategoryInfo.children" :key="cate.id">
					<view class="title">{{ cate.name }}</view>
					<view class="goodsWrap">
						<view class="goods" v-for="(item, index) in cate.children" :key="item.id">
							<image class="goods_img" :src="item.smallImgCard.img" mode=""></image>
							<text class="goods_text">{{ item.smallImgCard.name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			currentId: -1
		};
	},
	computed: {
		...mapGetters(['categoryList']),
		// 当前currentId对应的categoryList的单项
		currentCategoryInfo() {
			return this.categoryList.find(item => {
				return item.id === this.currentId;
			});
		}
	},
	mounted() {
		this.getCategoryList();
	},
	methods: {
		async getCategoryList() {
			await this.$store.dispatch('getCategoryList');
			this.currentId = this.categoryList[0].id;
		}
	}
};
</script>

<style lang="scss">
.categoryContainer {
	height: 100%;
	.main {
		height: calc(100vh - 112rpx);
		display: flex;
		.main_left {
			height: 100%;
			width: 186rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			.left_item {
				width: 148rpx;
				height: 48rpx;
				border-radius: 24rpx;
				color: #777777;
				font-size: 28rpx;
				text-align: center;
				line-height: 48rpx;
				margin: 26rpx 0;
				&.active {
					background: linear-gradient(to right, rgb(230, 170, 92), rgb(208, 139, 48));
					color: #ffffff;
				}
			}
		}

		.main_right {
			height: 100%;
			width: 564rpx;
			// background-color: pink;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 0 20rpx;
			.scroll_item {
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				width: 524rpx;
			}
			.banner {
				margin-top: 20rpx;
			}
			.right_swiper {
				// border-radius: 16rpx;
				height: 152rpx;
				swiper{
					height: 152rpx;
					swiper-item {
						height: 152rpx;
						.swiper-item {
							border-radius: 16rpx;
							height: 152rpx;
							width: 524rpx;
							image {
								border-radius: 16rpx;
								height: 152rpx;
								width: 524rpx;
							}
						}
					}
				}
			
			}
			.right_item {
				background-color: #ffffff;
				// margin-bottom: 20rpx;
				.title {
					font-size: 28rpx;
					font-weight: bold;
					line-height: 46rpx;
					padding: 20rpx 0 0 20rpx;
				}
				.goodsWrap {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					padding-bottom: 20rpx;
					.goods {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						width: 132rpx;
						height: 178rpx;
						padding: 20rpx 20rpx 0 20rpx;
						.goods_img {
							background-color: rgb(248, 248, 248);
							width: 132rpx;
							height: 132rpx;
							border-radius: 16rpx;
						}
						.goods_text {
							padding-top: 12rpx;
							color: #777777;
							font-size: 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1; /* * 多行文本溢出... */
							overflow: hidden;
						}
					}
				}
			}
		}
	}
}
</style>
